<template>
  <div class="bill-container">
    <el-card class="bill-card">
      <div class="bill-title">群兴寿服销账单</div>

      <!-- 基本信息 -->
      <el-form :model="formData" ref="formData" label-width="100px" size="small" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="逝者姓名" prop="deceasedName">
              <el-input v-model="formData.deceasedName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="deceasedGender">
              <el-select v-model="formData.deceasedGender" style="width: 100%">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务日期" prop="serviceDate">
              <el-date-picker
                  v-model="formData.serviceDate"
                  type="date"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点" prop="serviceLocation">
              <el-input v-model="formData.serviceLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 费用明细表格 -->
      <div class="bill-table">
        <div class="section-title">殡仪收费项目明细</div>
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            :span-method="objectSpanMethod"
        >
          <el-table-column
              type="index"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="category"
              label="类别"
              width="100">
          </el-table-column>
          <el-table-column
              prop="subCategory"
              label="子类"
              width="120">
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目"
              min-width="200">
            <template slot-scope="scope">
              <template v-if="scope.row.category === '寿盒'">
                <el-input
                    v-model="scope.row.name"
                    size="small"
                    @blur="handleNameChange(scope.row)"
                    placeholder="请输入项目名称">
                </el-input>
              </template>
              <template v-else>
                {{ scope.row.name }}
              </template>
            </template>
          </el-table-column>
          <el-table-column
              prop="quantity"
              label="数量"
              width="180"
              align="center"
          >
            <template slot-scope="scope" >
              <template v-if="scope.row.quantityFlag === '1'">
                <el-input-number
                    v-model="scope.row.quantity"
                    :min="0"
                    size="small"
                    @change="calculateTotal">
                </el-input-number>
              </template>
              <template v-else>
                {{ scope.row.quantity }}
              </template>
            </template>
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="180"
              align="center"
          >
            <template slot-scope="scope">
              <template v-if="scope.row.priceFlag === '1'">
                <el-input-number
                    v-model="scope.row.price"
                    :min="0"
                    size="small"
                    @change="calculateTotal">
                </el-input-number>
              </template>
              <template v-else>
                {{ scope.row.price }}
              </template>
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="discount"-->
<!--              label="折扣"-->
<!--              width="180"-->
<!--              align="center"-->
<!--          >-->
<!--            <template slot-scope="scope" v-if="scope.row.discountFlag === '1'">-->
<!--              <el-select v-model="scope.row.discount" placeholder="请选择折扣">-->
<!--                <el-option value="0.95" label="95折"></el-option>-->
<!--                <el-option value="0.9" label="9折"></el-option>-->
<!--                <el-option value="0.8" label="8折"></el-option>-->
<!--              </el-select>-->
<!--&lt;!&ndash;              <el-input-number&ndash;&gt;-->
<!--&lt;!&ndash;                  v-model="scope.row.discount"&ndash;&gt;-->
<!--&lt;!&ndash;                  :min="0"&ndash;&gt;-->
<!--&lt;!&ndash;                  size="small"&ndash;&gt;-->
<!--&lt;!&ndash;                  @change="calculateTotal">&ndash;&gt;-->
<!--&lt;!&ndash;              </el-input-number>&ndash;&gt;-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
              prop="amount"
              label="金额"
              width="150"
              align="right"
          >
            <template slot-scope="scope">
              {{ calculateAmount(scope.row) }}
            </template>
          </el-table-column>
        </el-table>

        <div class="total-amount">
          合计金额：{{ totalAmount }} 元
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="bill-footer">
        <el-form :model="formData" ref="formData" label-width="100px" size="small" :rules="formRules">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="支付方式" prop="paymentMethod">
                <el-select v-model="formData.paymentMethod" style="width: 100%">
                  <el-option label="现金" value="1"></el-option>
                  <el-option label="微信" value="2"></el-option>
                  <el-option label="支付宝" value="3"></el-option>
                  <el-option label="银行卡" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="家属" prop="familyContact">
                <el-input v-model="formData.familyContact"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="familyPhone">
                <el-input v-model="formData.familyPhone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="礼仪师" prop="masterName">
                <el-input v-model="formData.masterName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="masterPhone">
                <el-input v-model="formData.masterPhone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="remarks">
          承诺不以任何借口收取账单以外费用，以上费用均以人民币结算签字确认后特殊服务不退换。
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="button-group">
        <el-button type="primary" @click="saveBill">保存</el-button>
        <el-button type="success" @click="printBill">预览</el-button>
<!--        <el-button @click="resetForm">重置</el-button>-->
      </div>
    </el-card>

    <h-print v-if="showHPrint" :bill-data="billData" @onClose="onClose"></h-print>
  </div>
</template>

<script src="./order.js" />

<style scoped lang="scss" src="./order.scss" />
